<template>
  <div class="grid items-center gap-4 mb-4">
    <Label for="webhook-url">
      {{ t("Webhook URL") }}
    </Label>
    <Input
      id="webhook-url"
      v-model="pageData.alertNowWebhookURL"
      @change="updateValueFn"
    />
  </div>
  <div>
    <span style="color: red; margin-right: 8px"><sup>*</sup></span
    >{{ $t("Required") }}
    <span class="text-xs opacity-85">
      {{ t("aboutWebhooks")
      }}
      <a href="https://service.opsnow.com/docs/alertnow/en/user-guide-alertnow-en.html#standard" target="_blank" class="break-words underline hover:text-primary">{{ t("here") }}</a>
    </span>
  </div>
</template>

<script setup lang="ts">
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ref } from "vue";

import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      alertNowWebhookURL: "",
    }),
  },
});

const pageData = ref(props.data);

const emits = defineEmits(["update"]);

const updateValueFn = () => {
  emits("update", { alertNowWebhookURL: pageData.value.alertNowWebhookURL });
};
</script>
